<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3_过渡</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: #888;
            border: 1px solid red;
        }
        .box:hover{
            width: 700px;
            height: 500px;
            transition-property: width, background-color,height;
            transition-duration: 3s,10s,20s;
            transition-delay: 1s;
            transition-timing-function: steps(10,end);

            /*复合写法*/
            /*transition: steps(10,start),linear,2s,1s ;*/
            background-color: yellow;
        }
    </style>
</head>
<body>
<!--
    过渡：
        过渡可以在不使用flash动画，不适用JavaScript的情况下，让元素从一种样式，平滑过渡为另一种样式。
        1.transition-property
            作用：定义那个属性需要过渡,只有在该属性中定义的属性(比如宽、高、颜色等)才会有过渡效果。
            常用值：
                none:不过渡任何属性。
                all:过渡所有能过渡的属性。
                具某个属性名。例如 width、height，若有多个以逗号分隔。
            注意点: 不是所有的属性都能进行过渡，值为数字、或者值能转换为数字的属性，都支持过渡。
                    常见的支持过渡的属性有：颜色、长度值、百分比、z-index、opacity、2D变换属性、3D变换属性、阴影等。
        2.transition-duration
            作用：定义过渡效果的持续时间。一个状态过渡到另一个状态耗时多久。
            常用值：
                0:没有任何过渡时间--------默认值
                s或者ms:秒或者毫秒
                列表：
                    如果想让所有属性都持续一个时间，就写一个值
                    如果想让多个属性持续一个时间，就写多个值，并且一一对应。
        3.transition-delay
            作用:指定开始过渡的延时时间，单位s或者ms
        4.transition-timing-function
            作用：定义过渡效果的速度曲线。
            常用值：
                linear:匀速
                ease:默认值，先慢后快
                ease-in:先快后慢
                ease-out:先慢后快
                ease-in-out:先快后慢再快后慢
                step-start:跳帧开始
                step-end:跳帧结束
                steps(a,b):接受两个参数的步进函数，第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数默认值为end。
                cubic-bezier(n,n,n,n):自定义速度曲线
                    列表：
                        如果想让所有属性都使用一个速度曲线，就写一个值
                        如果想让多个属性使用一个速度曲线，就写多个值，并且一一对应。
                        如果想让多个属性使用不同的速度曲线，就写多个值，并且一一对应。
        5.transition复合属性:
            如果设置了一个时间，表示duration;如果设置了两个时间,第一个是duration,第二个是delay;其他值没有顺序要求。
-->
    <div class="box"></div>
</body>
</html>